<template>
  <view class="login-box">
    <image class="bg-image" :src="bg" mode="widthFix" />
    <view class="form-box">
      <view class="title">欢迎来到智说民革，请登录~</view>
      <!-- 基础表单校验 -->
      <uni-forms ref="valiForm" :rules="rules" :modelValue="formData">
        <uni-forms-item class="input input-phone" name="mobile">
          <view class="input-box phone-box">
            <uni-easyinput
              type="text"
              v-model.trim="formData.mobile"
              placeholder="请输入手机号"
            />
          </view>
        </uni-forms-item>
        <uni-forms-item name="code">
          <view class="input-box password-box">
            <uni-easyinput
              class="input input-password"
              type="password"
              v-model.trim="formData.code"
              placeholder="请输入身份证后四位"
            />
          </view>
        </uni-forms-item>
      </uni-forms>

      <button
        class="btn"
        open-type="chooseAvatar"
        @chooseavatar="onChooseAvatar"
      >登录</button>
    </view>
  </view>
</template>

<script lang="ts" setup>
import bg from "@/static/base64/login_bg";

import uniEasyinput from "@/components/uni-easyinput/uni-easyinput.vue";

import { login } from "@/api/index";
import { onLaunch, onShow, onHide } from "@dcloudio/uni-app";
import { successToast, warnToast } from "@/utils/request";
import { checkPhoneNumber } from "@/utils/tools";
import { reactive } from "vue";

const VITE_APP_PROXY_URL = import.meta.env.VITE_APP_PROXY_URL;

onShow(() => {
  uni.hideLoading();
});

const formData = reactive({
  mobile: "",
  code: "",
  // mobile: "13961049800",
  // code: "1456",
});

const rules: any = {
  mobile: {
    rules: [
      { required: true, errorMessage: "手机号不能为空" },
      {
        validateFunction: function (
          rule: any,
          value: any,
          data: any,
          callback: any
        ) {
          if (!checkPhoneNumber(value)) {
            // 检查是否满足匹配规则
            callback("请输入正确的手机号");
          }
          return true;
        },
      },
    ],
  },
  code: {
    rules: [{ required: true, errorMessage: "身份证后四位不能为空" }],
  },
};

const valiForm = ref(null) as any;
//	登录
const onSubmit = () => {
  if (valiForm.value) {
    valiForm.value.validate(async (err: any, value: any) => {
      if (err) return;

      const { errors } = await login(value);
      if (errors && errors.length) {
        warnToast("登录失败");
        return;
      } else {
        successToast("登录成功");
      }

      //	登录成功 跳转到首页
      uni.switchTab({ url: "/pages/Home/index" });
    });
  }
};

const onChooseAvatar = (e: any) => {
  const avatarUrl = e.detail.avatarUrl;

  uni.uploadFile({
    url: `${VITE_APP_PROXY_URL}/file/upload/updateMember`, // 服务器的上传接口地址
    filePath: avatarUrl,
    name: "file",
    header: {
      "content-type": "application/x-www-form-urlencoded",
    },
    formData: {
      phone: formData.mobile || "",
    },
    success: (uploadFileRes) => {
      const res = JSON.parse(uploadFileRes.data);
      //  获取头像成功之后， 调用登录接口进行登录
      onSubmit();
      console.log(res);
    },
  });
};
</script>

<style lang="scss" scoped>
.login-box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;

  .bg-image {
    position: absolute;
    width: 100%;
    z-index: 0;
  }

  .form-box {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 574rpx;
    width: 686rpx;
    height: 566rpx;
    background: linear-gradient(180deg, #fef4e8, #fcfcf7);
    border: 2rpx solid;
    border-image: linear-gradient(180deg, #f6eccf, #fffbee) 1 1;
    border-radius: 16rpx;
    overflow: hidden;
    z-index: 1;

    .title {
      padding: 52rpx 32rpx;
      width: 100%;
      color: #dda783;
      box-sizing: border-box;
    }

    .input-box {
      width: 622rpx;
      height: 88rpx;
      background: #ffffff;
      border-radius: 44rpx;
      overflow: hidden;
    }

    .btn {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 622rpx;
      height: 88rpx;
      background: #dda783;
      border-radius: 44rpx;
      color: #fff;
      font-size: 32rpx;
    }
  }
}
</style>
